<script src="https://fastly.jsdelivr.net/npm/three@0.145.0"></script>

<body></body>
<style>
    body {
        margin: 0;
    }
</style>
<script>
    setTimeout(function () {

        var scene = new THREE.Scene();

        var geometry = new THREE.BufferGeometry();

        // 普通顶点
        var vertices = new Float32Array([
            -40, 0, 0,
            70, 0, 0,
            70, 80, 0,
            -40, 80, 0
        ]);

        //3个为一组，表示一个顶点的xyz坐标
        geometry.attributes.position = new THREE.BufferAttribute(vertices, 3);

        // 索引顶点
        var indexes = new Uint16Array([
            0, 1, 2, // 第0、1、2点围成第一个三角形
            0, 2, 3 // 第0、2、3点围成第二个三角形
        ]);

        geometry.index = new THREE.BufferAttribute(indexes, 1);

        var material = new THREE.MeshBasicMaterial({
            color: 0x0000ff,
            side: THREE.DoubleSide
        });

        var mesh = new THREE.Mesh(geometry, material);

        scene.add(mesh);

        var width = window.innerWidth;
        var height = window.innerHeight;
        var k = width / height;
        var s = 100;

        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);

        camera.position.set(200, 300, 200);
        camera.lookAt(scene.position);

        var renderer = new THREE.WebGLRenderer();

        renderer.setSize(width, height);
        renderer.setClearColor(0xb9d3ff, 1);
        document.body.appendChild(renderer.domElement);

        function render() {

            renderer.render(scene, camera);

            mesh.rotateY(0.01);
            requestAnimationFrame(render);

        }

        render();

    }, 200);
</script>